<script setup name="uploadExcel" lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import type { UploadInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

interface Props {
  title: string
  visible: boolean
  status: number,
  otherParams?: any
}

const props = defineProps<Props>()
const emit = defineEmits(['confirm', 'update:visible'])

const action = import.meta.env.VITE_BASE_URL + (props.status === 1 ? '/xiaomi/order/upload' : '/kuidi/order/upload')


const uploadRef = ref<UploadInstance>()

// 确定按钮点击事件处理函数
const handleConfirm = () => {
  uploadRef.value!.submit()
}

/** 关闭弹窗 */
const handleClose = () => {
  emit('update:visible', false)
  console.log('关闭')
}

const handleSuccess = (response) => {
  ElMessage.success(response.msg)
  emit('confirm')
  handleClose()
  uploadRef.value!.clearFiles()
}

</script>

<template>
  <el-dialog :model-value="visible" :title="title" width="30%" @close="handleClose">
    <!-- 对话框内容插槽 -->
    <el-upload
      ref="uploadRef"
      :action="action"
      :limit="1"
      :data="otherParams"
      :auto-upload="false"
      :on-success="handleSuccess"
      :headers="{'authorization': userStore.getToken, 'Dept-Id': userStore.getSelectedDept._id }"
    >
      <template #trigger>
        <el-button>选择文件</el-button>
      </template>
    </el-upload>

    <!-- 自定义底部按钮 -->
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
</style>